<template>
  <div class="sidebar-container">
    <!-- 收缩控制按钮 -->
    <div class="toggle-btn" @click="toggleSidebar">
      <i :class="isCollapsed ? 'el-icon-s-unfold' : 'el-icon-s-fold'"></i>
    </div>

    <!-- 侧边栏菜单（根据收缩状态控制显示） -->
    <el-menu v-if="!isCollapsed" :default-active="activeIndex" class="el-menu-vertical-demo" @select="handleMenuSelect"
      background-color="#fff" text-color="#333" active-text-color="#409EFF">
      <div class="sidebar-title">管理菜单</div>
      <el-menu-item index="data-overview">
        <i class="el-icon-data-analysis"></i>
        数据概览
      </el-menu-item>
      <el-menu-item index="manage-user">
        <i class="el-icon-user-solid"></i>
        用户管理
      </el-menu-item>
      <el-menu-item index="manage-company">
        <i class="el-icon-office-building"></i>
        企业管理
      </el-menu-item>
      <el-menu-item index="manage-position">
        <i class="el-icon-s-cooperation"></i>
        职位管理
      </el-menu-item>
      <el-menu-item index="manage-review">
        <i class="el-icon-s-check"></i>
        审核管理
      </el-menu-item>
      <el-menu-item index="manage-feedback">
        <i class="el-icon-s-comment"></i>
        成员消息
      </el-menu-item>
    </el-menu>
  </div>
</template>

<script>
// import webSocketService from '@/util/manager_api/websocket-serve';
export default {
  data() {
    return {
      activeIndex: "",
      isCollapsed: false // 控制侧边栏是否收缩
    };
  },
  created() {
    this.activeIndex = this.$route.name || "data-overview";
  },
  methods: {
    handleMenuSelect(index) {
      if (this.activeIndex === index) return;

      switch (index) {
        case "data-overview":
          this.$router.push({ name: "data-overview" });
          break;
        case "manage-user":
          this.$router.push({ name: "manage-user" });
          break;
        case "manage-company":
          this.$router.push({ name: "manage-company" });
          break;
        case "manage-position":
          this.$router.push({ name: "manage-position" });
          break;
        case "manage-review":
          this.$router.push({ name: "manage-review" });
          break;
        case "manage-feedback":
          this.$router.push({ name: "manage-feedback" });
          break;
        default:
          break;
      }
    },
    // 切换侧边栏收缩状态
    toggleSidebar() {
      this.isCollapsed = !this.isCollapsed;
      // 可以在这里添加事件通知父组件侧边栏状态变化
      this.$emit('sidebar-toggle', this.isCollapsed);
    }
  }
};
</script>

<style scoped>
.sidebar-container {
  position: relative;
  height: 100%;
  background-color: #fff;
  box-shadow: 1px 0 2px rgba(0, 0, 0, 0.1);
}

/* 收缩按钮样式 */
.toggle-btn {
  position: absolute;
  top: 10px;
  right: 0px;
  /* 一半超出容器 */
  width: 20px;
  height: 20px;
  background-color: #409EFF;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  z-index: 10;
  transition: all 0.3s ease;
}

.toggle-btn:hover {
  background-color: #66b1ff;
}

.sidebar-title {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  border-bottom: 1px solid #eee;
  height: 80px;
  line-height: 80px;
  padding-left: 20px;
}

.el-menu-vertical-demo {
  height: 100%;
  border-right: none;
}


::v-deep .el-menu-vertical-demo {
  overflow-x: hidden;
}

::v-deep .el-menu-vertical-demo::-webkit-scrollbar {
  width: 0;
}
</style>